<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside id="aside">
        <AsideBox id="AsideBox" />
        <ModelChoice id="ModelChoice" />
      </el-aside>

      <el-container>
        <TopMenu id="Chatpage_topMenu" v-if="isM" />
        <!-- 中部 -->
        <el-main id="main">

          <rollingLogoVue class="chatpage_rolling" v-show="isThinking" @click="logoclick" />

          <Chat @focus="focusInput" v-if="mode === 'Chat' | mode === 'ChatGPT4'" />
          <DrawPicture :PicInfo="AIImagetext" @gettoken="Tokens" v-if="mode == 'Picture'" />

        </el-main>

        <!-- 底部 -->
        <el-footer id="footer">
          <div class="input_box">

            <el-input class="input" id="e'l-input" v-model="textarea" :autosize="{ minRows: 2, maxRows: 2 }"
              :placeholder="placeholderText" resize="none" @keydown="handleKeyCode($event)" type="textarea" />

            <el-icon class="confirm" @click="sendContest">
              <Position />
            </el-icon>

          </div>

        </el-footer>
      </el-container>

    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, provide, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import Chat from "../components/Chat/Chat.vue";
import DrawPicture from "../components/Chat/DrawPicture.vue";
import { deleteStorage, getTokens, Cancel, checkLevel } from "../api/api";
import AsideBox from "../components/Chat/AsideBox.vue";
import pinia from "../store";
import { pageStore } from "../store/ChatPage";
import { userStore } from "../store/user";
import { storeToRefs } from "pinia";
import TopMenu from "../components/icons/TopMenu.vue";
import rollingLogoVue from "../components/icons/rollingLogo.vue";
import ModelChoice from "../components/Chat/ModelChoice.vue";

//聊天页面状态 mode模式  question提的问题  isInterrupt是否中断  isThinking是否正在思考
const pagestore = pageStore(pinia);
const { mode, question, isInterrupt, isThinking } = storeToRefs(pagestore);
//用户等级 
const userstore = userStore(pinia);
const { level } = storeToRefs(userstore);
//input框的placeholder
const placeholderText = ref("please input");
//textarea的值
const textarea = ref("");
//AI图片的url
const AIImagetext = ref("");
//是否移动设备
const isM = ref(false);

//打开页面发送请求获取Tokens总数
onMounted(() => {
  Tokens();
  getLevel();
});

/*
  聊天框确认点击事件
  Chat组件通过watch检测Chattext的变化发送请求 ---改--> Chat组件通过检测chatpage的question状态变化发送请求
*/
function sendContest() {
  let contest = textarea.value;
  if (checkLength() === false) return;
  if (contest == "") {
    return;
  } else {
    // console.log("1");
    //将textarea的值替换为空
    textarea.value = "";
    placeholderText.value = "please input";
    //根据不同的模式发送不同的请求
    if (mode.value == "Chat" || mode.value == "ChatGPT4") {
      question.value = contest;
      isThinking.value = true;
    } else if (mode.value == "Picture") {
      AIImagetext.value = contest;
    }
  }
}

//回车触发handleKeyCode函数
function handleKeyCode(event) {
  //回车触发sendContext函数
  if (event.keyCode == 13 && isThinking.value == false) {
    //阻止按下回车时自动换行的默认事件
    event.preventDefault();
    sendContest();
  }
}

// 聚焦input输入框
function focusInput() {
  let input = document.getElementById("e'l-input");
  if (isM == false) input.focus();
}

//聚焦底部
function focusMao() {
  const mao = document.getElementById("mao");
  mao.scrollIntoView();
}

//点击logo触发cancel函数
function logoclick() {
  isInterrupt.value = true;
  isThinking.value = false;
}

//异步调用axios请求
async function Tokens() {
  await getTokens();
}
//获取level
async function getLevel() {
  level.value = await checkLevel();
}


//检测输入框长度
function checkLength() {
  if (textarea.value.length > 1500) {
    ElMessage.error("输入内容过长");
    return false;
  } else {
    return true;
  }
}

window.onresize = () => {
  focusMao();
  if (window.innerWidth < 900) {
    isM.value = true;
  } else {
    isM.value = false;
  }
};
if (window.innerWidth < 900) {
  isM.value = true;
} else {
  isM.value = false;
}
onUnmounted(()=> {
  window.onresize = null;
  deleteStorage();
})
</script>

<style scoped>
.common-layout {
  width: 100vw;
  height: 100vh;
}

#aside {
  height: 100vh;
  width: 20vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--left-black);
}

#AsideBox {
  margin-top: 20px;
}

#ModelChoice {
  margin-top: 20px;
}

#main {
  width: 80vw;
  height: 85vh;
  background-color: var(--left-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chatpage_rolling {
  position: absolute;
  bottom: 5%;
  z-index: 1;
  margin-right: 5%;
}

#footer {
  width: 80vw;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--left-black);
}

.input_box {
  margin-right: 5%;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  box-shadow: 1px 1px 10px 1px black;
  border: 10px solid black;
  border-radius: 10px;
  background-color: black;
}

.input {
  max-height: 15vh;
  background-color: transparent;
  color: var(--vt-c-text-dark-2);
}

/* 修改elementUI的input框样式 */
.el-textarea {
  --el-input-border-color: black;
  --el-input-hover-border-color: black;
  --el-input-bg-color: black;
  --el-input-focus-border-color: black;
  --el-input-text-color: var(--vt-c-text-dark-2);
  /* 直接修改了全局的禁用背景色 */
  --el-disabled-bg-color: black;
}

.confirm {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-60%);
  border-radius: 5px;
}

.confirm:hover {
  background-color: rgb(77, 78, 85);
}

.confirm:active {
  border: 2px solid var(--el-border-color);
}

::-webkit-scrollbar {
  width: 1px !important;
}


@media screen and (max-width: 1400px) {
  #aside {
    width: 25vw;
  }

  #main {
    width: 75vw;
  }

  #footer {
    width: 75vw;
  }

  .input_box {
    margin-right: 0;
    width: 97%;
  }

  .chatpage_rolling {
    margin-right: 0;
  }
}

@media screen and (max-width: 900px) {
  .confirm {
    background-color: gray;
  }

  #aside {
    display: none;
  }

  #main {
    width: 100vw;
  }

  #footer {
    width: 100vw;
  }

  .input_box {
    margin-right: 0;
    width: 97%;
  }
}
</style>